<template>
  <el-row class="publish">
    <el-col :span="8" class="area" v-loading="loading">
      <portalTree
        :data="treeData"
        :defaultProps="defaultProps"
        @checkChangeFun="checkChangeFun"
        :filterNode="filterNode"
        ref="portalTree"
      >
        <template slot="header">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-input
                size="mini"
                v-model="filterText"
                placeholder="请输入查询条件"
              ></el-input>
            </el-col>
            <el-col :span="6">
              <el-button size="mini" type="primary" @click="searchFun"
                >搜索</el-button
              >
            </el-col>
          </el-row>
        </template>
      </portalTree>
    </el-col>
    <el-col :span="16" class="area">
      <el-transfer
        class="transfer"
        v-model="value"
        :titles="titles"
        :data="transferData"
        :right-default-checked="rightDefaultChecked"
      ></el-transfer>
    </el-col>
  </el-row>
</template>

<script>
import { fetchTree } from "@/api/admin/dept";
import portalTree from "@/components/portalTree";
import { axiosGetUserForDept } from "@/api/portalPublic";
export default {
  name: "publish",
  components: {
    portalTree
  },
  created() {
    this.getTreeDataFun();
  },
  data() {
    return {
      loading: true,
      treeData: [],
      filterText: "",
      defaultProps: {
        children: "children",
        label: "name"
      },
      transferData: [],
      value: [],
      hasCheckData: [],
      titles: ["成员", "已选成员"],
      rightDefaultChecked: []
    };
  },
  methods: {
    searchFun() {
      this.$refs.portalTree.filter(this.filterText);
    },
    filterNode(value, data) {
      if (!value) {
        return true;
      }
      return data.name.indexOf(value) !== -1;
    },
    getTreeDataFun() {
      fetchTree().then(res => {
        if (res.data.code === 0) {
          this.treeData = res.data.data;
          this.loading = false;
        }
      });
    },
    getCheckDataFun(id) {
      axiosGetUserForDept(id).then(res => {
        this.transferData = res.data.data.map(v => {
          let json = {
            key: v.userId,
            label: v.name
          };
          return json;
        });
      });
    },
    handleWHRightChange(value) {
      console.log(value);
    },
    checkChangeFun(data) {
      // console.log(data);
      // console.log(this.rightDefaultChecked);
      // console.log(this.value);
      // this.value = this.rightDefaultChecked;
      let id;
      let name;
      let isHaveId = this.hasCheckData.some(v => v.id === data.id);
      if (!isHaveId) {
        // this.hasCheckData.push(data.id);
        this.hasCheckData.push({ name: data.name, id: data.id });
        id = data.id;
        name = data.name;
      } else {
        let index = this.hasCheckData.findIndex(v => v.id === data.id);
        this.hasCheckData.splice(index, 1);
        id = this.hasCheckData[this.hasCheckData.length - 1] ?
          this.hasCheckData[this.hasCheckData.length - 1].id :
          -1;
        name = this.hasCheckData[this.hasCheckData.length - 1] ?
          this.hasCheckData[this.hasCheckData.length - 1].name :
          "";
      }
      this.titles[0] = name + "成员";
      this.titles[1] = name + "已选成员";
      this.getCheckDataFun(id);
    }
  }
};
</script>

<style lang="less" scoped>
.publish {
  width: 100%;
  height: 100%;
  padding-bottom: 10px;
  .area {
    height: 100%;
    margin-bottom: 0px;
  }
  .transfer {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    /deep/ .el-transfer-panel {
      height: 100%;
      width: 250px;
    }
    /deep/ .el-transfer-panel__body {
      height: 100%;
      .el-transfer-panel__list {
        height: 90%;
      }
    }
    /deep/ .el-transfer__buttons {
      padding: 0;
      width: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      .el-transfer__button {
        padding: 7px 15px;
        &:last-child {
          position: relative;
          top: -5px;
        }
      }
    }
  }
}
</style>
